<template>
    <div class="houseList">
        <div style="position: relative;">
            <CommonImage v-if="!isCustom" class="HouseImg" :src="dataListCopy.pictureAddress" />
            <CommonImage v-else class="imgCustom" :src="dataListCopy.pictureAddress" />
            <span v-if="dataListCopy.picNum > 1" class="picNum">+{{ dataListCopy.picNum }}</span>
        </div>
        <div class="item">
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <div class="flex">
                        <span class="title">{{ isCustom ? dataListCopy.customerName : dataListCopy.community }}</span>
                        <div v-if="dataListCopy.building == null">
                            <span class="titleTag" v-show="isLookDoorId" @click="lookDoorId">
                                {{ doorId.building }}-{{ doorId.unit }}-{{ doorId.roomIdentifier }}
                            </span>
                            <span v-if="!isCustom" class="titleTag" v-show="!isLookDoorId" @click="lookDoorId">{{
                                $t('text.House.l106') }}</span>
                        </div>
                        <span class="titleTag" v-else>
                            {{ dataListCopy.building == null ? '' : dataListCopy.building + '-' }}
                            {{ dataListCopy.unit == null ? '' : dataListCopy.unit + '-' }}
                            {{ dataListCopy.roomIdentifier == null ? '' : dataListCopy.roomIdentifier }}
                        </span>
                    </div>
                    <div class="flex">
                        <span class="tag">
                            No.{{ dataListCopy.no == null ? '-' : dataListCopy.no }}
                        </span>
                        <span class="tag1" v-if="dataListCopy.isTop == '1'">{{ $t('text.Common.l17') }}</span>
                        <span class="tag2" v-if="dataListCopy.isCollect">{{ $t('text.Common.l18') }}</span>
                        <span class="tag3" v-if="Number(dataListCopy.dealStatus) > 0">
                            {{ dataListCopy.dealStatus != '0' ? '' : $t('text.DialogLayout.l282') }}
                            {{ dataListCopy.dealStatus != '1' ? '' : $t('text.DialogLayout.l283') }}
                            {{ dataListCopy.dealStatus != '2' ? '' : $t('text.DialogLayout.l284') }}
                            {{ dataListCopy.dealStatus != '3' ? '' : $t('text.DialogLayout.l285') }}
                            {{ dataListCopy.dealStatus != '4' ? '' : $t('text.DialogLayout.l286') }}
                            {{ dataListCopy.dealStatus != '5' ? '' : $t('text.DialogLayout.l287') }}
                        </span>
                        <span class="tag4"
                            v-if="dataListCopy.customerType != undefined && dataListCopy.customerType != null">{{
                                dataListCopy.customerType }}</span>

                        <span class="tag4" v-if="dataListCopy.floorType != undefined && dataListCopy.floorType != null">{{
                            dataListCopy.floorType }}</span>
                        <span class="tag5"
                            v-if="dataListCopy.customerGrade != undefined && dataListCopy.customerGrade != null">{{
                                dataListCopy.customerGrade }}</span>

                        <span class="tag6" v-if="dataListCopy.mode > 0">
                            {{ $t('text.System.l47') }}
                        </span>
                        <span class="tag6" v-if="dataListCopy.isCorrelation">
                            {{ $t('text.Common.l60') }}
                        </span>
                        <span v-for="item in  dataListCopy.supportingFacilities" v-bind:key="item" class="tag7">
                            {{ item }}
                        </span>
                    </div>
                </div>

                <div class="flex" style="margin-right: 20px;gap: 20px;">
                    <div>
                        <CommonDialog :title="isLookOwner && !this.isCustom ? $t('text.House.l107') : $t('text.House.l318')"
                            :width="'300px'">
                            <template v-slot:button>
                                <div @click="lookOwner">
                                    <img class="icon1" src="../../assets//images/phone.svg">
                                    <div class="text4">{{ !this.isCustom ? $t('text.House.l107') : $t('text.House.l318') }}
                                    </div>
                                </div>
                            </template>
                            <div v-if="isLookOwner && !this.isCustom">
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l108') }}</div>
                                    <div class="t3">{{ lookOwnerData.owner_name }}</div>
                                </div>
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l109') }}</div>
                                    <div class="t3">{{ lookOwnerData.owner_phone }}</div>
                                    <div class="t1">
                                        <img class="t4" src="../../assets/images/call.svg">
                                        <div class="t5">{{ $t('text.House.l309') }}</div>
                                    </div>
                                </div>
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l110') }}</div>
                                    <div class="t3" style="color: #6698ff;">{{ lookOwnerData.count }}{{
                                        $t('text.Common.l16') }}</div>
                                </div>
                            </div>
                            <div v-if="isLookOwner && this.isCustom">
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l318') }}</div>
                                    <div class="t3">{{ lookOwnerData.customer_name }}</div>
                                </div>
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l319') }}</div>
                                    <div class="t3">{{ lookOwnerData.customer_phone }}</div>
                                    <div class="t1">
                                        <img class="t4" src="../../assets/images/call.svg">
                                        <div class="t5">{{ $t('text.House.l309') }}</div>
                                    </div>
                                </div>
                                <div class="t1">
                                    <div class="t2">{{ $t('text.House.l110') }}</div>
                                    <div class="t3" style="color: #6698ff;">{{ lookOwnerData.count }}{{
                                        $t('text.Common.l16') }}</div>
                                </div>
                            </div>

                        </CommonDialog>
                    </div>
                    <div v-if="!isCustom">
                        <img class="icon1" src="../../assets/images/share.svg">
                        <div class="text4">{{ $t('text.House.l111') }}</div>
                    </div>
                    <div v-if="isCustom">
                        <DialogLayout15 isCustomer>
                            <img class="icon1" src="../../assets/images/f3.svg" style="background: #6698ff;">
                            <div class="text4">{{ $t('text.House.l122') }}</div>
                        </DialogLayout15>
                    </div>

                    <!--菜单-->
                    <MoreMenuSelect>
                        <div>
                            <img class="icon1" src="../../assets/images/more.svg">
                            <div class="text4">{{ $t('text.House.l112') }}</div>
                        </div>
                        <template v-slot:item>
                            <div class="more">
                                <div class=" b1 df1">
                                    <div class="m3" v-for="( item, index ) in moreMeans" v-bind:key="item">
                                        <div :style="{ 'background': item.color }" class="m2"
                                            v-if="index != 2 || index == 2 && !isCustom">
                                            <img class="m1" :src="item.img">
                                        </div>
                                        <DialogLayout13 v-if="index == 0" :type="isCustom ? '客源' : '房源'">{{ item.name }}
                                        </DialogLayout13>
                                        <DialogLayout14 v-if="index == 1">{{ item.name }}</DialogLayout14>
                                        <DialogLayout15 v-if="index == 2 && !isCustom">{{ item.name }}</DialogLayout15>

                                        <div v-if="index == 3 && !isCustom" @click="setTop(dataListCopy.isTop == '1')">
                                            {{ dataListCopy.isTop == '1' ? item.name[1] : item.name[0] }}
                                        </div>
                                        <div v-if="index == 4 && !isCustom" @click="setCollect(dataListCopy.isCollect)">
                                            {{ dataListCopy.isCollect ? item.name[1] : item.name[0] }}
                                        </div>
                                        <div v-if="index == 3 && isCustom" @click="setTop(dataListCopy.isTop == '1')">
                                            {{ dataListCopy.isTop == '1' ? item.name[1] : item.name[0] }}
                                        </div>
                                        <div v-if="index == 4 && isCustom" @click="setCollect(dataListCopy.isCollect)">
                                            {{ dataListCopy.isCollect ? item.name[1] : item.name[2] }}
                                        </div>

                                        <DialogLayout17 v-if="index == 5"
                                            :type="isCustom ? dataListCopy.customerType : dataListCopy.floorType"
                                            :isCustom="isCustom" @returnData="setType">{{ isCustom ? item.name[1] :
                                                item.name[0] }}
                                        </DialogLayout17>


                                        <DialogLayout12 v-if="index == 6" :dealStatus="dataListCopy.dealStatus"
                                            :isCustom="isCustom" @returnData="setState">{{ item.name }}</DialogLayout12>

                                        <DialogLayout10 v-if="index == 7" :isCustomer="isCustom">{{ isCustom ? item.name[1]
                                            :
                                            item.name[0] }}</DialogLayout10>
                                        <DialogLayout11 v-if="index == 8" :isCustomer="isCustom" @returnData="setClass"
                                            :BasicDetailList="BasicDetailList"
                                            :state="isCustom ? dataListCopy.customerClass : dataListCopy.houseClass">
                                            {{ isCustom ? item.name[1] : item.name[0] }}
                                        </DialogLayout11>
                                        <DialogLayout9 v-if="index == 9" :isCustomer="isCustom">{{ isCustom ? item.name[1] :
                                            item.name[0] }}</DialogLayout9>
                                    </div>
                                </div>
                            </div>
                        </template>

                    </MoreMenuSelect>


                </div>
            </div>

            <div class="flex" v-if="!isCustom">
                <div class="f1" v-for="( item, index ) in  dataListCopy.data " v-bind:key="item">
                    <div :class="index == 0 ? 'text1' : 'text3'">{{ item.value == null ? '-' : item.value }}</div>
                    <div class="text2">
                        {{ item.title }}
                    </div>
                </div>
            </div>


            <div v-else-if="typeIndex == 0" style="text-align: left;">
                <div>
                    <span class="text5">
                        {{ dataListCopy.customerClass == '2' ? $t('text.DialogLayout.l158') : dataListCopy.customerClass == '0' ?
                            $t('text.House.l130') : $t('text.House.l324') }}
                    </span>
                    <span class="text7">
                        &ensp;
                        {{ (dataListCopy.lowerPrice == null ? '' :
                            String(dataListCopy.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' - ') }}
                        {{ (dataListCopy.upperPrice == null ? '' :
                            String(dataListCopy.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' AED 、') }}

                        {{ dataListCopy.lowerArea == null ? '' : $t('text.House.l97') + ': ' + dataListCopy.lowerArea + '-'
                        }}
                        {{ dataListCopy.upperArea == null ? '' : dataListCopy.upperArea + 'm² 、' }}

                        {{ dataListCopy.decorationLevel == null ? '' : $t('text.House.l84') + ': '
                            + dataListCopy.decorationLevel + ' 、' }}

                        {{ dataListCopy.unitType == null ? '' : $t('text.House.l99') + ': ' + dataListCopy.unitType + ' 、'
                        }}

                        {{ dataListCopy.houseType == '0' ? $t('text.House.l187') : dataListCopy.houseType == '1' ?
                            $t('text.House.l188') : dataListCopy.houseType == '2' ? $t('text.House.l189') :
                                dataListCopy.houseType == '3' ?
                                    $t('text.House.l190') : dataListCopy.houseType == '3' ? $t('text.House.l191') : '' }}
                    </span>
                    <span class="text6">{{ $t('text.House.l131') }}</span>
                    <span class="text7">{{ dataListCopy.intentionCommunity == null ? $t('text.Common.l12') :
                        dataListCopy.intentionCommunity }}</span>
                </div>
                <div style="padding-top: 5px;">
                    <span class="text6">{{ $t('text.House.l132') }}</span>
                    <span class="text7">{{ dataListCopy.notes }}</span>
                </div>
            </div>

            <div v-else-if="typeIndex == 1" style="text-align: left;">
                <div>
                    <span class="text5">{{ $t('text.House.l137') }}</span>

                    <span class="text7">
                        &ensp;

                        {{ (dataListCopy.lowerPrice == null ? '-' :
                            String(dataListCopy.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' - ') }}
                        {{ (dataListCopy.upperPrice == null ? '-' :
                            String(dataListCopy.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' AED') }}&emsp;

                        {{ $t('text.House.l97') + dataListCopy.lowerArea }}-{{ dataListCopy.upperArea + 'm²' }}&emsp;
                        {{ $t('text.House.l84') + dataListCopy.decorationLevel == null ? $t('text.Common.l12') :
                            dataListCopy.unitType +
                            $t('text.House.l198') }}&emsp;

                        {{ dataListCopy.houseType == '0' ? $t('text.House.l187') : dataListCopy.houseType == '1' ?
                            $t('text.House.l188') : dataListCopy.houseType == '2' ? $t('text.House.l189') :
                                dataListCopy.houseType == '3' ?
                                    $t('text.House.l190') : dataListCopy.houseType == '3' ? $t('text.House.l191') : '' }}
                        {{ dataListCopy.houseDetailsType }}
                    </span>
                    <span class="text6">{{ $t('text.House.l131') }}</span>
                    <span class="text7">{{ dataListCopy.intentionCommunity == null ? $t('text.Common.l12') :
                        dataListCopy.intentionCommunity }}</span>

                </div>
                <div style="padding-top: 5px;">
                    <span class="text6">{{ $t('text.House.l132') }}</span>
                    <span class="text7">{{ dataListCopy.notes }}</span>
                </div>
            </div>

        </div>
    </div>
</template>
    
<script>
import { lookDoorPlate, lookOwnerInfo, lookCustomerInfo, houseSetTop, collectHouse, delCollectHouse, customerSetTop, collectCustomer, delCollectCustomer } from '../../http/api'
import { ElMessage } from 'element-plus'
import CommonDialog from '../input/CommonDialog.vue'
import DialogLayout9 from '../dialogLayout/DialogLayout9.vue'
import DialogLayout10 from '../dialogLayout/DialogLayout10.vue'
import DialogLayout11 from '../dialogLayout/DialogLayout11.vue'
import DialogLayout12 from '../dialogLayout/DialogLayout12.vue'
import DialogLayout13 from '../dialogLayout/DialogLayout13.vue'
import DialogLayout14 from '../dialogLayout/DialogLayout14.vue'
import DialogLayout15 from '../dialogLayout/DialogLayout15.vue'
import DialogLayout17 from '../dialogLayout/DialogLayout17.vue'
import CommonImage from '../input/CommonImage.vue'
import MoreMenuSelect from '../select/MoreMenuSelect.vue'
export default {
    name: 'HouseDetailTop',
    components: {
        CommonDialog,
        DialogLayout9,
        DialogLayout10,
        DialogLayout11,
        DialogLayout12,
        DialogLayout13,
        DialogLayout14,
        DialogLayout15,
        DialogLayout17,
        CommonImage,
        MoreMenuSelect
    },
    props: {
        isCustom: {
            default: false,
            type: Boolean
        },
        dataList: {
            default: {},
        },
        id: String,
        typeIndex: {
            default: 0,
            type: Number
        },
        BasicDetailList: {
            default: {}
        }
    },
    data() {
        return {
            isLookDoorId: false,
            isLookOwner: false,
            lookOwnerData: {},
            doorId: {},
            dataListCopy: this.dataList,
            moreMeans: [
                { name: this.$t('text.House.l120'), img: require('../../assets/images/f1.svg'), color: "#00b412" },
                { name: this.$t('text.House.l121'), img: require('../../assets/images/f2.svg'), color: "#c081ff" },
                { name: this.$t('text.House.l122'), img: require('../../assets/images/f3.svg'), color: "#8080ff" },

                { name: [this.$t('text.House.l123'), this.$t('text.House.l285')], img: require('../../assets/images/f4.svg'), color: "#f9cd90" },
                { name: [this.$t('text.House.l124'), this.$t('text.House.l286'), this.$t('text.House.l323')], img: require('../../assets/images/f5.svg'), color: "#b8741a" },
                { name: [this.$t('text.House.l125'), this.$t('text.House.l287')], img: require('../../assets/images/f6.svg'), color: "#02bfbf" },

                { name: this.$t('text.House.l126'), img: require('../../assets/images/f7.svg'), color: "#80d3f8" },
                { name: [this.$t('text.House.l127'), this.$t('text.House.l288')], img: require('../../assets/images/f8.svg'), color: "#429df8" },
                { name: [this.$t('text.House.l128'), this.$t('text.House.l289')], img: require('../../assets/images/f9.svg'), color: "#429df8" },
                { name: [this.$t('text.House.l129'), this.$t('text.House.l290')], img: require('../../assets/images/f10.svg'), color: "#ec808d" },
            ],
        }
    },
    mounted() {
    },
    methods: {
        setClass(params) {
            if (this.isCustom) {
                this.dataListCopy.houseClass = params.newStatus
            } else {
                this.dataListCopy.customerClass = params.newStatus
            }
        },
        setType(params) {
            if (this.isCustom) {
                this.dataListCopy.customerType = params.newType
            } else {
                this.dataListCopy.floorType = params.newFloorType
            }
        },
        setState(params) {
            this.dataListCopy.dealStatus = params.newStatus
        },
        setTop(booeal) {
            if (!this.isCustom) {
                houseSetTop({ houseId: this.$route.query.id, isTop: !booeal ? '1' : '0' }).then(res => {
                    if (res !== undefined) {
                        this.dataListCopy.isTop = !booeal ? '1' : '0'
                        ElMessage.success({
                            showClose: true,
                            message: this.$t('text.Common.l11'),
                            type: 'success',
                        })
                    }
                }).catch()
            } else {
                customerSetTop({ customerId: this.$route.query.id, isTop: !booeal ? '1' : '0' }).then(res => {
                    if (res !== undefined) {
                        this.dataListCopy.isTop = !booeal ? '1' : '0'
                        ElMessage.success({
                            showClose: true,
                            message: this.$t('text.Common.l11'),
                            type: 'success',
                        })
                    }
                }).catch()
            }
        },
        setCollect(booeal) {
            if (booeal) {
                if (!this.isCustom) {
                    delCollectHouse({ houseId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.dataListCopy.isCollect = false
                            ElMessage.success({
                                showClose: true,
                                message: this.$t('text.Common.l11'),
                                type: 'success',
                            })
                        }
                    }).catch()
                } else {
                    delCollectCustomer({ customerId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.dataListCopy.isCollect = false
                            ElMessage.success({
                                showClose: true,
                                message: this.$t('text.Common.l11'),
                                type: 'success',
                            })
                        }
                    }).catch()
                }
            } else {
                if (!this.isCustom) {
                    collectHouse({ houseId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.dataListCopy.isCollect = true
                            ElMessage.success({
                                showClose: true,
                                message: this.$t('text.Common.l11'),
                                type: 'success',
                            })
                        }
                    }).catch()
                } else {
                    collectCustomer({ customerId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.dataListCopy.isCollect = true
                            ElMessage.success({
                                showClose: true,
                                message: this.$t('text.Common.l11'),
                                type: 'success',
                            })
                        }
                    }).catch()
                }
            }
        },
        lookDoorId() {
            lookDoorPlate({ houseId: this.$route.query.id }).then(res => {
                if (res !== undefined) {
                    this.isLookDoorId = !this.isLookDoorId
                    this.doorId = res
                }
            }).catch()
        },
        lookOwner() {
            if (this.isCustom) {
                if (Object.keys(this.lookOwnerData).length === 0) {
                    lookCustomerInfo({ customerId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.isLookOwner = true
                            this.lookOwnerData = res
                        }
                    }).catch()
                }
            } else {
                if (Object.keys(this.lookOwnerData).length === 0) {
                    lookOwnerInfo({ houseId: this.$route.query.id }).then(res => {
                        if (res !== undefined) {
                            this.isLookOwner = true
                            this.lookOwnerData = res
                        }
                    }).catch()
                }
            }
        }

    },
    watch: {
        dataList() {
            this.dataListCopy = this.dataList
            console.log(this.dataListCopy)
        }
    },
    computed: {

    }
}
</script>
    
<style scoped>
.t1 {
    display: flex;
    align-items: center;
}

.t2 {
    color: gray;
    font-size: 12px;
    padding: 10px;
}

.t3 {
    color: black;
    font-size: 12px;
    padding: 10px;
}

.t4 {
    width: 16px;
    height: 16px;
    padding-left: 5px;
    padding-top: 0px;
}

.t5 {
    font-size: 12px;
    color: #6698ff;
}

.houseList {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80px;
    margin-left: 15px;
}

.icon1 {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 100%;
}

.flex {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
}

.f1 {
    margin-right: 30px;
}

.HouseImg {
    width: 170px;
    height: 105px;
    padding-top: 45px;
}

.imgCustom {
    width: 110px;
    height: 110px;
    padding: 0;
    margin-top: 45px;
    border-radius: 100%
}

span {
    color: #6698ff;
    font-size: 15px;
    word-break: keep-all;
    white-space: nowrap;
}

.titleTag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 13px;
    margin-right: 5px;
    margin-left: 20px;
}

.title {
    color: black;
    font-size: 20px;
}

.tag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
    border-radius: 3px;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(236, 128, 141);
    padding: 3px 6px;
    color: white;
    margin-right: 5px;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #666de1;
    padding: 2px 6px;
    color: white;
    border: 1px solid #666de1;
    margin-right: 5px;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #979797;
    padding: 2px 6px;
    color: white;
    border: 1px solid #979797;
    margin-right: 5px;
}

.tag4 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f9cd90;
    padding: 2px 6px;
    color: white;
    border: 1px solid #f9cd90;
    margin-right: 5px;
}

.tag5 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(66, 157, 248);
    padding: 2px 6px;
    color: white;
    border: 1px solid rgb(66, 157, 248);
    margin-right: 5px;
}

.tag6 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #5ec8b2;
    padding: 2px 6px;
    color: white;
    border: 1px solid #5ec8b2;
    margin-right: 5px;
}

.tag7 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(242, 242, 242);
    padding: 2px 6px;
    color: black;
    border: 1px solid rgb(215, 215, 215);
    margin-right: 5px;
}

.text1 {
    font-size: 16px;
    color: rgb(236, 128, 141);
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
}

.text2 {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    word-break: keep-all;
    white-space: nowrap;
}

.text3 {
    font-size: 16px;
    color: black;
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
}

.text4 {
    font-size: 13px;
    padding-top: 5px;
    color: #6698ff;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
}

.text5 {
    font-size: 12px;
    color: rgb(236, 128, 141);
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
}

.text6 {
    font-size: 12px;
    color: black;
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
    padding-right: 5px;
}

.text7 {
    font-size: 12px;
    padding-top: 5px;
    color: #6698ff;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
    padding-right: 15px;
}

.more {
    background: white;
    top: 70px;
    right: 0;
    padding: 10px;
    padding-bottom: 0px;
    font-size: 13px;
    z-index: 5;
    border: 1px solid #eee;
}

.m1 {
    width: 17px;
    height: 17px;
    padding-top: 0;
}

.m2 {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-right: 10px;
}

.m3 {
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    white-space: nowrap;
}

.picNum {
    color: white;
    background: #535352;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding-bottom: 1px;
    transform: scale(0.9);
}
</style>